<template>
  <a-row type="flex" justify="space-between">
    <a-col :span="18">
      <div class="recommend-t">推荐商品</div>
      <a-row>
        <a-col :span="24" class="recommend-box">
          <a-row type="flex" class="recommend-box-item" v-for="(item,index) in arrMsg" :key="index">
            <a-col :span="24" @click="jump(item)">
              <a-col
                :span="16"
                style=" white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;"
              >
                <div class="recommend-box-type" style="background:#337ab7;">商品</div>
                {{item.title}}
              </a-col>
              <a-col :span="4" style="padding-left:20px;font-weight: bold;">[{{item.cate_time}}]</a-col>
              <a-col :span="4" class="recommend-box-money">￥{{item.price}}</a-col>
              <!-- <a-col :span="4" class="recommend-box-msg">{{item.mark}}</a-col> -->
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-col>
    <a-col :span="6" class="notice">
      <a-row class="notice-t" type="flex">
        <a-col
          :span="4"
          class="notice-t-l notice-t2"
          :class="noticeT2Idx == 0?'notice-t2-f-select':''"
          @click="noticeT2Tag(0)"
        >最近成交</a-col>
        <a-col
          :span="4"
          class="notice-t-l notice-t2"
          :class="noticeT2Idx == 1?'notice-t2-l-select':''"
          @click="noticeT2Tag(1)"
        >最近发布</a-col>
      </a-row>
      <div class="notice-p notice-p2">
        <a-row>
          <div
            v-for="(item,index) in arrNoticeTwo"
            :key="index"
            @mousemove="noMouse(index)"
            @click="jump(item)"
            class="cp"
          >
            <a-col
              :span="24"
              class="notice-box-unfold"
              v-if="index == noticeTwoIdx"
              :style="noticeT2Idx==0?'background:#8843e5;':'background:#4389e5;'"
            >
              <a-col :span="6">
                <img :src="item.icon" alt srcset />
              </a-col>
              <a-col :span="18" class="notice-box-unfold-n">
                <div>{{item.title}}</div>
                <div>成交价：￥{{item.price}}</div>
              </a-col>
              <div
                class="notice-box-unfold-index"
                :class="noticeT2Idx==0?'notice-box-unfold-index-b1':'notice-box-unfold-index-b2'"
              >
                <span>{{index + 1}}</span>
              </div>
            </a-col>
            <a-col :span="24" class="notice-box-l" v-else>
              <span class="point"></span>
              {{item.title}}
            </a-col>
          </div>
        </a-row>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { GET_GAME_HOT, NEW_ORDER } from "./server";
export default {
  data() {
    return {
      arrMsg: [],
      arrNoticeTwo: [],
      noticeT2Idx: 0,
      noticeTwoIdx: 0
    };
  },
  created() {
    this.getHot();
    this.getOrder();
  },
  methods: {
    noticeT2Tag(i) {
      this.noticeT2Idx = i;
      this.getOrder();
    },
    noMouse(i) {
      this.noticeTwoIdx = i;
    },
    jump(item) {
      this.$router.push({
        name: `game-list-msg`,
        params: {
          list: item.list_id,
          msg: item.game_id
        }
      });
    },
    getHot() {
      GET_GAME_HOT().then(res => {
        if (!res) return;
        this.arrMsg = res.data;
      });
    },
    getOrder() {
      NEW_ORDER({ type: this.noticeT2Idx + 1 }).then(res => {
        if (res) {
          this.arrNoticeTwo = res.data;
        } else {
          this.arrNoticeTwo = [];
        }
      });
    }
  }
};
</script>

<style lang='less' scoped>
.recommend-t {
  height: 120px;
  line-height: 120px;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  background: #f6f6f6;
}

.recommend-box {
  background: #fff;
  padding: 10px 5px 0 5px;
  .recommend-box-item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    &:hover {
      background: #f0f2f5;
    }
    .recommend-box-type {
      width: 42px;
      height: 24px;
      line-height: 24px;
      margin: 0 12px;
      text-align: center;
      display: inline-block;
      color: #fff;
    }
    .recommend-box-money {
      font-size: 16px;
      color: #0084ff;
    }
    .recommend-box-msg {
      color: #bcbcbc;
    }
  }
}
.notice {
  padding-left: 16px;
  .notice-t {
    line-height: 42px;

    .notice-t-l {
      width: 58px;
      height: 42px;
      background: #f6f6f6;
      position: relative;
      font-size: 18px;
      text-align: center;
      color: #0084ff;
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 21px 5px;
        border-color: transparent transparent #f6f6f6 #f6f6f6;
        border-style: solid;
        position: absolute;
        right: -10px;
        top: 0;
      }
    }
    .notice-t2 {
      width: 100px;
      color: #333;
      background: #e1e1e1;
      cursor: pointer;
      &::after {
        border-color: transparent transparent #e1e1e1 #e1e1e1;
      }
      &:first-child {
        margin-right: 10px;
      }
    }
    .notice-t2-f-select {
      background: #8843e5;
      color: #fff;
      &::after {
        border-color: transparent transparent #8843e5 #8843e5;
      }
    }

    .notice-t2-l-select {
      background: #4389e5;
      color: #fff;
      &::after {
        border-color: transparent transparent #4389e5 #4389e5;
      }
    }
  }
  .notice-p {
    height: 220px;
    background: #f6f6f6;
    border-bottom: 2px solid #f5f5f5;
    .notice-box-l {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 30px;
      line-height: 30px;
      .point {
        background: #cdcdcd;
        width: 4px;
        height: 4px;
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: -8px;
      }
    }

    .notice-box-r {
      height: 30px;
      line-height: 30px;
      color: #bcc2d3;
    }
  }
  .notice-p2 {
    height: 362px;

    .notice-box-unfold {
      height: 108px;
      color: #fff;
      line-height: normal;
      padding: 10px;
      position: relative;
      img {
        width: 44px;
        height: 44px;
        border-radius: 5px;
        margin-right: 10px;
      }

      .notice-box-unfold-n div:first-child {
        height: 56px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }

      .notice-box-unfold-n div:last-child {
        margin-top: 6px;
      }

      .notice-box-unfold-index {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-width: 16px 24px;
        border-style: solid;
        span {
          position: absolute;
          left: -18px;
          top: -6px;
          font-size: 16px;
          font-weight: bold;
        }
      }

      .notice-box-unfold-index-b1 {
        border-color: transparent transparent #e1cbff #e1cbff;
        color: #8843e5;
      }

      .notice-box-unfold-index-b2 {
        border-color: transparent transparent #cbdbff #cbdbff;
        color: #4389e5;
      }
    }
  }
}
</style>
